<template>
    <div class="infinite-container">
        <!-- <div class="lefttime">状态:<span>{{qData.leftTimeTxt||'-:-'}}</span></div> -->
        <div class="flex flex_between goJudgeLine flex_vcenter" id="goJudgeLine">
          <span class="feeText">已结束</span>
          <mu-raised-button label="去评价" primary @click="goJudge(qData)" v-if="isEvaluable == 1"></mu-raised-button>
          <div class="flex rateBox" @click="goJudgedDetail(judgeDetailInfo)" v-else>
            <rate :size="18" :score="4" :readonly="true"></rate>
            <img src="../../assets/images/arrow_dry.png" alt="">
          </div>
        </div>
      <mu-divider/>
        <div class="bgwhite">
            <mu-list>
                <mu-list-item title="">
                    <span slot="left" class="ltxt">订单时间</span>
                    <span slot="left" class="ltxt1">{{qData.createTime}}</span>
                    <span slot="right" class="feeText">{{checkStatue(qData.consultStatus)}}</span>
                </mu-list-item>
                <mu-divider/>
            </mu-list>
        </div>
        <div class="fcon">
            <!-- <div>订单时间:{{qData.createTime}}</div> -->
            <div class="item-con">
                <div>
                    <div class="item-con-mid">
                        <div>
                            <img v-lazy="doctor.header" alt="">
                        </div>
                        <div>
                            <h3><span>{{qData.doctName||''}}</span><span>{{qData.deptName||''}}</span></h3>
                            <div> <img src="../../assets/wzhis/icon_images.png"><span>图文咨询</span></div>
                        </div>
                        <div>
                            <span>{{'￥'+(qData.cost||'')+'元'}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt10"></div>
        <div class="bgwhite">
            <mu-list>
                <mu-list-item title=" 问诊人">
                    <span slot="right" class="feeText">{{qData.personName||''}}</span>
                </mu-list-item>
                <mu-divider/>
            </mu-list>
        </div>
        <div class="mt10"></div>
        <left-border-title :title="'病情描述'"></left-border-title>
        <div class="scon bgwhite">
            {{qData.question||''}}
        </div>
        <div class="mt10"></div>
        <left-border-title :title="'病情照片'"></left-border-title>
        <ul class="fileHandler flex wrap bgwhite">
            <li v-for="(item,index) in images" :key="index"> <img :src="item.fileUrl" alt=""></li>
        </ul>

        <chatbox ref="chatbox" :tdata="qData" v-show="qData.consultStatus == 11"></chatbox>
        <div class="lcon" v-show="qData.consultStatus == 12 || qData.consultStatus == 13">
            <mu-raised-button label="再次咨询" fullWidth primary @click="goDocPage(qData)"></mu-raised-button>
        </div>
        <mu-dialog :open="dialog" @close="dialog=false">
            此操作将永久删除该就诊人, 是否继续?
            <mu-flat-button slot="actions" @click="dialog=false" default label="取消" />
            <mu-flat-button slot="actions" primary @click="confirmDelete" label="确定" />
        </mu-dialog>
    </div>
</template>

<script>
    import leftBorderTitle from '../../components/leftBorderTitle.vue'
    import TimeCounter from '../../components/TimeCounter.js';
    import chatbox from "./nochatbox";
    import {commonAjaxJson, RESTFUL_API} from '../../api/api'
    import rate from '../../components/BsRate.vue'
    export default {
        data() {
            return {
                timeCounter: null,
                qData: {},
                images: [],
                doctor: {},
                dialog: false,
                disabled: false,
                param: {
                    consultId: ""
                },
                param1: {
                    "consultId": 0,
                    "status": "12",
                    "tradeNo": ""
                },
                consultId: '',
              isEvaluable: 0,
              judgeDetailInfo: ''
            }
        },
        components: {
            leftBorderTitle,
            chatbox,
            rate
        },
        beforeDestroy() {
            this.timeCounter && this.timeCounter.stop();
        },
        methods: {
          queryJudgeDetail () {
            let param = {
              templateId: 1,
              correlationId: this.consultId
            }
            commonAjaxJson(RESTFUL_API.queryJudgeDetail, param, true).then(res => {
              if (res.data.code == 200) {
                this.isEvaluable = res.data.data.isEvaluable
                if (this.isEvaluable == 0) {
                  this.judgeDetailInfo = res.data.data
                }
              } else {
                this.$store.commit('UPDATE_TOAST', {
                  message: res.data.message
                });
              }
            })
          },
          goJudge (data) {
            this.$router.push({
              path: '/queryOnline/judge',
              query: data
            })
          },
          goJudgedDetail (data) {
            this.$router.push({
              path: '/queryOnline/judgeDetail',
              query: data
            })
          },
            goDocPage(item){
                this.$router.push('/queryOnline/doctorDetail?docid=' + item.doctId);
            },
            checkStatue(statue){
                if(statue == 11){
                    return "已结束"
                }else if(statue == 12){
                    return "已取消"
                }else if(statue == 13){
                    return "已退款"
                }else{
                    return "";
                }
            },
            cancelQuery() {
                if (!this.$route.query.cid) {
                    this.$store.commit('UPDATE_TOAST', {
                        message: "页面错误!"
                    });
                    return;
                }
                this.param1.consultId = this.$route.query.cid;
                commonAjaxJson(RESTFUL_API.updateQueryStatus, this.param1, true).then(res => {
                    if (res) {
                        this.$store.commit('UPDATE_TOAST', {
                            message: "操作成功!"
                        });
                        this.$router.go(-1);
                    }
                })
            },
            confirmDelete() {
                this.cancelQuery();
            },
            getOrderDetail() {
                if (!this.$route.query.cid) {
                    this.$store.commit('UPDATE_TOAST', {
                        message: "页面错误!"
                    });
                    return;
                }
                this.param.consultId = this.$route.query.cid;
                commonAjaxJson(RESTFUL_API.queryDetail, this.param, true).then(res => {
                    if (res.data.code == 1 || res.data.code == 200) {
                      this.consultId = res.data.data.consultId
                      this.queryJudgeDetail()
                        res.data.data.leftTimeTxt = "-:-";
                        if (!this.timeCounter) {
                            this.timeCounter = new TimeCounter(30 * 60);
                        }
                        this.timeCounter.ready().then(() => {
                            if (this.timeCounter.checkIsTimeOut(res.data.data.createTime)) {
                                this.qData.leftTimeTxt = "已超时";
                                this.disabled = true;
                                return;
                            }
                            this.timeCounter.timeChangCallback = (splash) => {
                                var txt = this.timeCounter.calTime(res.data.data.createTime, splash);
                                if (txt != "已超时") {
                                    txt = "待支付剩余时间" + txt;
                                } else {
                                    this.disabled = true;
                                }
                                this.qData.leftTimeTxt = txt;
                            };
                            this.timeCounter.start();
                        });
                        res.data.data.cost = res.data.data.cost + '';
                        this.qData = res.data.data;
                        this.images = res.data.listAttr;
                        this.doctor = res.data.doctor;
                    } else {
                        this.$store.commit('UPDATE_TOAST', {
                            message: "服务器内部错误!"
                        });
                    }
                });
            }
        },
        mounted() {
            this.getOrderDetail();
        }
    }
</script>
<style lang="less">
  #goJudgeLine .mu-raised-button {
    min-width: 60px;
    height: 30px;
    line-height: 30px;
  }

</style>
<style lang="less" scoped>
    @import "../../common/css/flex.css";
    @import '../../common/css/component';
    .rateBox{
      img{
        height: 14px;
        margin-left: 5px;
        margin-top: 6px;
      }
    }
    .goJudgeLine{
      height: 44px;
      background-color: white;
      padding: 0 10px;
    }
    .infinite-container {
        // padding-bottom: 30px;
        @{deep} .mu-item-left img {
            width: 30px;
            height: 30px;
        }
        @{deep} .mu-item.show-left {
            padding-left: 60px;
        }
        @{deep} .mu-item-title {
            color: #333;
        }
        @{deep} .mu-item-text {
            color: #ccc;
        }
        @{deep} .mu-item {
            min-height: 44px;
        }
        .feeText {
            color: #0fc47d;
        }
        .lefttime {
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #ff6600;
            background: #fffdce;
            border-bottom: 1px solid #e8e8e8;
        }
        .item-con {
            background: #fff;
            padding: 15px 0 15px 0px;
            >div {
                width: 100%;
                position: relative;
            }
            &-mid {
                display: table;
                width: 100%;
                >div:first-child {
                    display: table-cell;
                    vertical-align: middle;
                    width: 52px;
                    >img {
                        width: 52px;
                        height: 52px;
                        vertical-align: middle;
                    }
                }
                >div:nth-child(2) {
                    display: table-cell;
                    padding-left: 15px;
                    vertical-align: middle;
                    >h3 {
                        font-size: 16px;
                        color: #333;
                        font-weight: normal;
                        font-size: 14px;
                        padding-bottom: 2px;
                        >span:first-child {
                            font-size: 16px;
                            padding-right: 10px;
                        }
                    }
                    >div {
                        font-size: 14px;
                    }
                    >div:first-of-type {
                        display: flex;
                        align-items: center;
                        >img {
                            width: 15px;
                            height: 15px;
                            margin-right: 10px;
                        }
                        color: #999;
                    }
                }
                >div:last-child {
                    vertical-align: middle;
                    display: table-cell;
                    width: 1%;
                    white-space: nowrap;
                    font-size: 20px;
                    color: #ff6600;
                    text-align: right;
                }
            }
        }
        .fcon {
            padding: 0px 15px 0px 15px;
            background: #fff;
            border-bottom: 1px solid #e8e8e8;
            // >div:first-child {
            //     width: 100%;
            //     height: 40px;
            //     line-height: 40px;
            //     border-bottom: 1px solid #e8e8e8;
            //     font-size: 14px;
            //     color: #666;
            // }
        }
        .scon {
            border-top: 1px solid #e8e8e8;
            width: 100%;
            padding: 15px;
            color: #666;
            font-size: 14px;
        }
        .tcon {
            border-top: 1px solid #e8e8e8;
            width: 100%;
            padding: 15px;
            color: #666;
            font-size: 14px;
        }
        .fileHandler {
            border-top: 1px solid #e8e8e8;
            padding: 0px 15px;
            padding-bottom: 20px;
            li {
                position: relative;
                width: 25%;
                height: 25%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
                img {
                    width: 80%;
                    height: 80%;
                    border-radius: 4px;
                }
            }
        }
        .lcon {
            width: 100%;
            padding-top: 10px;
            text-align: center;
            @{deep}.mu-raised-button {
                width: 80%;
                height: 44px;
                margin-top: 20px;
            }
            @{deep}.mu-raised-button-secondary {
                color: #f24242;
                border: 1px solid #f24242;
                background: #fff1f1;
            }
        }
    }
    .ltxt {
        white-space: nowrap;
        color: #666;
        padding-right: 10px;
        font-size: 14px;
    }
    .ltxt1 {
        white-space: nowrap;
        color: #999;
        font-size: 14px;
    }
    .feeText {
        font-weight: normal;
        color: #0fc47d;
        font-size: 14px;
    }
</style>
